<template>
  <div class="common-layout">
    <el-container>
      <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px;">
        <h1>宠物店后台管理系统</h1>
        <div class="demo-type" style="display: flex; align-items: center;margin-top: 50px">
          <div>
            <el-dropdown placement="bottom">
              <el-avatar :icon="UserFilled" style="margin-right: 10px;"/>
              <template #dropdown>
                <el-dropdown-menu>

                  <el-dropdown-item v-if="name==null"><router-link to="/login">登录</router-link></el-dropdown-item>
                  <el-dropdown-item v-else><router-link to="/login">退出</router-link></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <p>{{ name }}</p>
        </div>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                  :default-active="state.currentViewKey"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  @select="handleSelect"
              >
                <el-menu-item index="1">
                  <el-icon>
                    <Setting/>
                  </el-icon>
                  <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <el-icon>
                    <IconMenu/>
                  </el-icon>
                  <span>订单管理</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <el-icon>
                    <Setting/>
                  </el-icon>
                  <span>预约管理</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <el-icon>
                    <Setting/>
                  </el-icon>
                  <span>用户账号管理</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <el-icon>
                    <Setting/>
                  </el-icon>
                  <span>社区管理</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <el-icon>
                    <Setting/>
                  </el-icon>
                  <span>管理员账号管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-container>
          <el-main>
            <component :is="currentComponent"/>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <base-footer></base-footer>
</template>
<script lang="ts" setup>
import { reactive, onMounted, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import ProductManager from '../views/ProductManager.vue';
import OrderManager from '../views/OrderManager.vue';
import AppointmentManager from '../views/AppointmentManager.vue';
import AdminManager from '../views/AdminManager.vue';
import { Setting, Menu as IconMenu } from '@element-plus/icons-vue';
import BaseFooter from "../components/BaseFooter.vue";
import { UserFilled } from '@element-plus/icons-vue';
import UserManager from "../views/UserManager.vue";
import CommunityManager from "../views/CommunityManager.vue";

const router = useRouter();
const route = useRoute();

// 从 localStorage 获取用户名和当前视图键
const name = localStorage.getItem('userName') || '';
const savedViewKey = localStorage.getItem('currentViewKey') || '1';

const views = {
  '1': ProductManager,
  '2': OrderManager,
  '3': AppointmentManager,
  '4': UserManager,
  '5': CommunityManager,
  '6': AdminManager,
};

const state = reactive({
  currentViewKey: savedViewKey as keyof typeof views, // 使用从 localStorage 获取的键名作为状态
});

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleSelect = (key: keyof typeof views) => {
  state.currentViewKey = key; // 更新当前视图键
  localStorage.setItem('currentViewKey', key); // 更新 localStorage 中的值
};

const currentComponent = computed(() => {
  return views[state.currentViewKey] || ProductManager;
});

// 初始化当前视图
onMounted(() => {
  const initialKey = route.query.view as keyof typeof views | undefined;
  if (initialKey && views[initialKey]) {
    state.currentViewKey = initialKey; // 直接设置键，并更新 localStorage
    localStorage.setItem('currentViewKey', initialKey);
  }
  const token = localStorage.getItem('jwtToken');
  if (token == null) {
    router.replace('/login');
  }
});

// 监听路由变化，确保如果通过 URL 参数直接访问某个视图，也能正确更新状态
watch(
    () => route.query.view,
    (newVal) => {
      if (newVal && views[newVal as keyof typeof views]) {
        state.currentViewKey = newVal as keyof typeof views;
        localStorage.setItem('currentViewKey', newVal);
      }
    }
);
</script>

<style>
.el-header {
  background-color: #ebeeec;
}

.el-aside {
  background-color: #ebeeec;
}

.demo-type {
  display: flex;
  margin-bottom: 50px;
}

.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>